<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        background-color="#696969"
        text-color="#f2f2f2"
        active-text-color="#ffd04b"
        :default-active="this.$route.path"
        router
      >
        <el-menu-item index="/blackAndWhite">黑白球</el-menu-item>
        <el-menu-item index="/shadeChange">动态纹理</el-menu-item>
        <el-menu-item index="/customCube">立方体纹理</el-menu-item>
        <el-menu-item index="/flyLine">飞线</el-menu-item>
        <el-menu-item index="/scanlineCircle">圆形扫描线</el-menu-item>
        <el-menu-item index="/customShader">自定义纹理</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<style>
.el-aside {
  background-color: #696969;
}

.el-aside ul {
  height: 100%;
  border: 0;
}

.el-main {
  position: relative;
}
</style>
